import {Breadcrumb, Layout, Menu} from 'antd';
import {Outlet} from "react-router-dom";
import {useNavigate} from 'react-router-dom';

const {Header, Footer, Content} = Layout;


function App() {
    let index = 1;
    const navigate = useNavigate();
    function turnTo(url) {
        navigate(url);
    }

    function renderMenu(key, text, url) {
        return <Menu.Item key={key}
                          onClick={() => turnTo(url)}>{text}</Menu.Item>;
    }

    function renderMenuWithoutKey(text, url) {
        return renderMenu(index++, text, url);
    }

    function renderMenus() {
        let menus = [];
        menus.push(renderMenuWithoutKey('介绍', '/article'))
        menus.push(renderMenuWithoutKey('ox游戏', '/game'))
        menus.push(renderMenuWithoutKey('demo', '/demo'))
        menus.push(renderMenuWithoutKey('控件demo', '/controlDemo'))
        menus.push(renderMenuWithoutKey('计算温度demo', '/temperatureDemo'))
        menus.push(renderMenuWithoutKey('非受控组件', '/uncontrollableComponentDemo'))
        return menus;
    }


    return (
        <Layout className="layout">
            <Header>
                <div className="logo"/>
                <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
                    {renderMenus()}
                </Menu>
            </Header>
            <Content style={{padding: '0 50px'}}>
                <Breadcrumb style={{margin: '16px 0'}}>
                    <Breadcrumb.Item>Home</Breadcrumb.Item>
                    <Breadcrumb.Item>List</Breadcrumb.Item>
                    <Breadcrumb.Item>App</Breadcrumb.Item>
                </Breadcrumb>
                <div className="site-layout-content" id="content">
                    <Outlet/>
                </div>
            </Content>
            <Footer style={{textAlign: 'center'}}>Ant Design ©2021 Created by Ant UED</Footer>
        </Layout>
    );
}

export default App;